<template>
  <u-popup mode="bottom" v-model="innerShow" :maskCloseAble="false">
    <view class="popupBg">
      <view class="clearfix btn-view">
        <text class="float_left cancel-btn" @click="cancel">取消</text>
        <text class="float_right confirm-btn" @click="confirm">确定</text>
      </view>
      <view class="now-sel-view">
        <text style="color: #666; font-size: 24rpx">已选：</text>
        <text>{{ oneCate.title || "全部分类" }}</text>
        <text v-if="!!twoCate.title">-{{ twoCate.title || "" }}</text>
        <text v-if="!!threeCate.title">-{{ threeCate.title || "" }}</text>
      </view>
      <view class="cate-view clearfix">
        <scroll-view scroll-y class="cate-view-li cate-one">
          <view
            class="cate-li"
            :class="[!oneCate.id ? 'cate-on' : '']"
            @click="changeCate({}, 1)"
            >全部分类</view
          >
          <view
            class="cate-li clearfix"
            :class="[oneCate.id === item.id ? 'cate-on' : '']"
            @click="changeCate(item, 1)"
            v-for="(item, index) in categoryData"
            :key="index"
          >
            <text class="float_left">{{ item.title || "未知分类" }}</text>
            <text
              class="ibonfont ibonjinru float_right"
              v-if="item.children && item.children.length"
            ></text>
          </view>
        </scroll-view>
        <scroll-view
          v-if="oneCate.children"
          scroll-y
          class="cate-view-li cate-two"
        >
          <view
            class="cate-li clearfix"
            :class="[twoCate.id === item.id ? 'cate-on' : '']"
            @click="changeCate(item, 2)"
            v-for="(item, index) in oneCate.children"
            :key="index"
          >
            <text class="float_left">{{ item.title || "未知分类" }}</text>
            <text
              class="ibonfont ibonjinru float_right"
              v-if="item.children && item.children.length"
            ></text>
          </view>
        </scroll-view>
        <scroll-view
          v-if="twoCate.children"
          scroll-y
          class="cate-view-li cate-three"
        >
          <view
            class="cate-li"
            :class="[threeCate.id === item.id ? 'cate-on' : '']"
            @click="changeCate(item, 3)"
            v-for="(item, index) in twoCate.children"
            :key="index"
          >
            {{ item.title || "未知分类" }}
          </view>
        </scroll-view>
      </view>
    </view>
  </u-popup>
</template>

<script>
export default {
  props: {
    showModel: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      innerShow: false,
      categoryData: [],
      oneCate: {},
      twoCate: {},
      threeCate: {},
    };
  },
  watch: {
    showModel: {
      immediate: true,
      handler(val) {
        this.innerShow = val;
      },
    },
    innerShow(val) {
      if (!val) {
        this.$emit("cancel");
      }
    },
  },
  created() {
    this.getCate();
  },
  methods: {
    async getCate() {
      const { err, data } = await this.$u.api.getAllCategoryPost({
        enableStatus: 5,
      });

      if (err) return;
      this.categoryData = data;
    },
    change() {
      this.$emit("change");
    },
    changeCate(row, i) {
      switch (i) {
        case 1:
          this.oneCate = row;
          this.twoCate = {};
          this.threeCate = {};
          break;
        case 2:
          this.twoCate = row;
          this.threeCate = {};
          break;
        case 3:
          this.threeCate = row;
          break;
      }
      // this.now_cate = id;
    },
    cancel() {
      this.$emit("cancel");
    },
    confirm() {
      let lastCate = { id: 0 };
      let categoryPath = [];
      if (this.oneCate.id) {
        lastCate = this.oneCate;
        categoryPath.push(this.oneCate.id);
      }
      if (this.twoCate.id) {
        lastCate = this.twoCate;
        categoryPath.push(this.twoCate.id);
      }
      if (this.threeCate.id) {
        lastCate = this.threeCate;
        categoryPath.push(this.threeCate.id);
      }

      const params = {
        oneCate: this.oneCate,
        twoCate: this.twoCate,
        threeCate: this.threeCate,
      };

      this.$emit("confirm", {
        lastCate: lastCate,
        params: params,
        categoryPath: categoryPath.join(","),
      });
    },
  },
};
</script>

<style lang="scss">
.popupBg {
  width: 100%;
  height: 60vh;
  padding-top: 20rpx;
  left: 0;
  bottom: 0;
  background: #fff;
  // position: absolute;
  border-top-left-radius: 24rpx;
  border-top-right-radius: 24rpx;
  box-shadow: 0 -8rpx 32rpx rgba(0, 0, 0, 0.08);

  .btn-view {
    padding: 0 20rpx;
  }
  .confirm-btn {
    font-size: 32rpx;
    color: $uni-color-primary;
  }

  .cancel-btn {
    font-size: 32rpx;
    color: #999;
  }

  .now-sel-view {
    padding: 20rpx;
    border-bottom: 1rpx solid #e4e7ed;
    color: #333;
  }

  .cate-view {
    display: flex;
    justify-content: space-between;
    padding: 0 20rpx;
    .cate-view-li:last-child {
      border-right: 0 none;
    }

    .cate-view-li {
      flex: 1;
      border-right: 1rpx solid #e4e7ed;
      height: 44vh;
      padding: 0 2rpx;
      overflow-y: auto;
      .cate-li {
        height: 70rpx;
        line-height: 70rpx;
        padding: 0 16rpx;
        font-size: 26rpx;
        color: #444;
        .ibonjinru {
          font-size: 24rpx;
          color: #666;
        }
      }

      .cate-on {
        color: $uni-color-primary;
        background-color: #f5f7fa;
      }
    }
  }
}
</style>
